<template>
    <div>
        <el-input disabled :value="roleInfo.name"></el-input>
        <el-tree 
            style="margin: 20px 0" 
            ref="tree" 
            node-key="id" 
            show-checkbox 
            default-expand-all 
            :data="allPermissions"
            :props="defaultProps" 
            :show-checkbox="true"
            />
        <el-button type="primary" :loading="buttonLoading" @click="save">保存</el-button>
        <el-button @click="$router.replace({name: 'Role'})">取消</el-button>
    </div>
</template>
<script>
    export default {
        name: 'roleAuth',

        data() {
            return {
                allPermissions: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                roleInfo: {},
                buttonLoading: true
            };
        },

        created() {
            
            this.getData()
        },

        methods: {
            getData() {

                let roleId = this.$route.params.id;
                console.log(roleId);
                this.getTreeAllData(roleId)
                

            },
            async getTreeAllData(roleId){
                this.buttonLoading = true;
                let result = await this.$API.role.reqRolePermission(roleId);
                if(result.code == 200){
                    let data = result.data
                    this.allPermissions = data.items
                    this.roleInfo = data.role
                    this.buttonLoading = false;
                    
                    if(result.data.role.permissions.length > 0){
                        
                        result.data.role.permissions.forEach((item) => {

                            // 确保组件已挂载并且数据准备完毕
                            this.$nextTick(() => {
                                // 使用 setChecked 方法
                                this.$refs.tree.setChecked(item, true, false);
                            });
                           
                        });
                    }
                }
            },
            async save(){
                
                // 获取选中的父节点
                let parentId = this.$refs.tree.getHalfCheckedKeys()
                // 获取选中的子节点
                let permissionId = this.$refs.tree.getCheckedKeys()
                // 合并
                let mergeArr = parentId.concat(permissionId);
                let roleInfo = {
                    id:this.roleInfo.id,
                    permissions:this.roleInfo.permissions
                }
                roleInfo.permissions = mergeArr.length > 0 ? mergeArr.join(",") : ''
                let result = await this.$API.role.reqAddOrUpdateRole(roleInfo)
                if (result.code == 200){
                    this.$message({
                        type: 'success',
                        message: '保存成功'
                    })
                    const roleName = this.roleInfo.name
                    const roles = this.$store.getters.roles
                    // 跳转
                    this.$router.replace('/system/role',() => {

                        // 跳转成功后, 判断如果更新的是当前用户对应角色的权限, 重新加载页面以获得最新的数据
                        if (roles.includes(roleName)) {
                            window.location.reload()
                        }
                    });
                }
            },
        }
            


    }
</script>